\part{HTML}

\newpage

\chapter{HTML简介}

\section{前后端}

\subsection{前端工程师（Front-End Engineer）}

前端工程师互联网时代软件产品研发中不可缺少的一种专业研发角色。前端是一个相对比较新的行业，大约从2005年开始，正式的前端工程师角色被行业所认可。到了2010年，互联网开始全面进入移动时代，前端工程师的地位也越来越重要。\\

现在一些后端开发工作也可以由前端工程师来完成。最初所有的开发工作都是由后端工程师完成的，但是随着业务越来越繁杂、工作量过大，后端工程师们不堪重负，于是将可视化和部分交互功能的开发剥离出来，形成了前端开发。\\

前端工程师主要负责的工作就是使用HTML、CSS、JavaScript等专业技能和工具将产品UI设计稿实现成网站产品。涵盖用户PC端和移动端网页，处理视觉和交互问题。\\

广义上讲，所有用户终端产品，只要是与视觉和交互有关的部分都是前端工程师的专业领域。产品从前期开发到后期的维护、更新、升级都需要前端工程师来完成。\\

\subsection{后端工程师（Back-End Engineer）}

后端工程师主要负责服务器的数据逻辑和业务逻辑等，主要研究怎么把数据更好地传输给前端工程师。\\

如果一个人除了完成前端开发和后端开发工作以外，从产品设计到项目开发，再到后期运维都是同一个人，甚至可能还要负责UI、配动画、写文档等，那么就被称为全栈工程师（Full Stack Engineer）。\\

\subsection{前端应用领域}

前端技术可以被应用在一系列领域中：

\begin{itemize}
	\item 网页网站
	\item APP、微信小程序
	\item 移动端小游戏
	\item 炫酷的特效
	\item 大数据可视化
	\item VR虚拟现实
\end{itemize}

前端工程师需要具备大量必要的技能，其中前端三大基础语言为HTML、CSS、JavaScript，除此之外还需要学习jQuery、网络、es6、webpack4.0、小程序、VUE、React、Node.js、Mongo DB数据库等内容。\\

\newpage

\section{结构层/表现层/行为层}

\subsection{结构层/表现层/行为层}

\begin{itemize}
	\item 结构层HTML（HyperText Markup Language）：一个超文本标记语言，负责描绘出网页内容的架构。

	\item 表示层CSS（Cascading Style Sheets）：层叠样式表，负责如何显示结构层的有关内容。

	\item 行为层JavaScript：目前在Web上使用的最主要的客户端脚本语言，是Web脚本语言的一个标准，可以对结构层和表现层的内容随意进行更改。
\end{itemize}

\vspace{0.5cm}

\subsection{代码注释}

在HTML、CSS、JavaScript中代码的注释是不一样的。

\begin{lstlisting}[style=htmlcssjs, title=HTML注释]
<!-- 注释内容 -->
\end{lstlisting}

\begin{lstlisting}[style=htmlcssjs, title=CSS注释]
/* 注释内容 */
\end{lstlisting}

\begin{lstlisting}[style=htmlcssjs, title=JavaScript注释]
// 注释内容
/* 注释内容 */
\end{lstlisting}

\newpage

\section{Hello World!}

\subsection{Hello World!}

问候一下世界，制作人生中的第一个HTML网页吧。\\

\mybox{Hello World!}\\

\begin{lstlisting}[style=htmlcssjs]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
</head>
<body>
    Hello World!
</body>
</html>
\end{lstlisting}

\vspace{0.5cm}

\subsection{HTML和CSS的关系}

先来看一下单纯的HTML标签长什么样：

\begin{figure}[H]
	\centering
	\includegraphics[]{img/C1/1-3/1.png}
\end{figure}

再来看一下经过CSS修饰过后的HTML标签：\\

\begin{lstlisting}[style=htmlcssjs]
p {
    color: red;
    border: 1px solid red;
    width: 140px;
    height: 40px;
}
\end{lstlisting}

\begin{figure}[H]
	\centering
	\includegraphics[]{img/C1/1-3/2.png}
\end{figure}

CSS是用来修饰HTML样式的。虽然HTML本身是有一些默认样式，但如果想改变HTML标签的样式，就需要借助CSS。\\

HTML + CSS构成了网页的基本页面结构和样式。\\

\mybox{添加样式}\\

\begin{lstlisting}[style=htmlcssjs]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加样式</title>
    <style type="text/css">
        p {
            font-size: 12px;
            color: #930;
            text-align: center;
        }
    </style>
</head>
<body>
    <p>Hello World!</p>
</body>
</html>
\end{lstlisting}

\newpage

\section{标签}

\subsection{标签}

HTML中标签的语法有以下几点：

\begin{enumerate}
	\item 标签（tag）是由英文尖括号【<】和【>】括起来的，如<html>就是一个标签。

	\item HTML中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个【/】。\\
	      \begin{lstlisting}[style=htmlcssjs]
<p></p>
<div></div>
<span></span>
    \end{lstlisting}

	\item 标签与标签之间是可以嵌套的，但先后顺序必须保持一致。如，<div>里嵌套<p>，那么</p>必须放在</div>的前面。\\
	      \begin{lstlisting}[style=htmlcssjs]
<div><p>Hello World!</p></div>
    \end{lstlisting}

	\item HTML标签不区分大小写，如<h1>和<H1>是一样的，但建议小写，因为大部分程序员都已小写为准。
\end{enumerate}

\newpage

\section{HTML文档结构}

\subsection{HTML文档结构}

\mybox{HTML文档结构}\\

\begin{lstlisting}[style=htmlcssjs]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML文档结构</title>
</head>
<body>

</body>
</html>
\end{lstlisting}

\begin{itemize}
	\item <!DOCTYPE html>：文档类型声明，表示该文件为HTML文件。声明必须是HTML文档的第一行，位于<html>之前。

	\item <html></html>：<html>用来标识HTML文档的开始，</html>位于HTML文档的最后面，用来标识HTML文档的结束。这两个标签对成对存在，中间的部分是文档的头部和主题。

	\item <head></head>：标签包含有关HTML文档的信息，可以包含一些辅助性标签。如<title></title>、<link />、<meta />、<style></style>、<script></script>等，浏览器除了会在标题栏显示<title>元素的内容外，不会向用户显示<head>元素内的其他任何内容。

	\item <body></body>：HTML文档的主体部分，在此标签中可以包含<p>、<h1>、<br>等众多标签。<body>出现在</head>之后，且必须在闭标签</html>之前闭合。
\end{itemize}

\newpage

\section{小哥，做头吗？——head标签}

\subsection{head标签}

文档的头部描述了文档的各种属性和信息，包括文档的标题等，绝大多数文档头部包含的数据都不会真正作为内容显示给读者。\\

<head></head>为双标签，表示头部标签，通常用来嵌套meta、title、style等标签。

\begin{itemize}
	\item <title>：在<title>和</title>之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的<title>用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。

	\item <meta charset="UTF-8">：设置当前文件字符编码。

	\item <style>：设置当前文件样式。
\end{itemize}

\newpage

\section{你就是馋人家的身子！——body标签}

\subsection{body标签}

在网页上要展示出来的页面内容一定要放在<body>中。\\

\mybox{body标签}\\

\begin{lstlisting}[style=htmlcssjs]
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>body标签</title>
</head>
<body>
    <!-- 标题标签 -->
    <h1>HTML简介</h1>
    <!-- 段落标签 -->
    <p>HTML的全称为超文本标记语言，是一种标记语言。</p>
    <!-- 段落标签 -->
    <p>它包括一系列标签．可以将网络上的文档格式统一。</p>
</body>
</html>
\end{lstlisting}

\newpage

\chapter{语义化标签}

\section{开始我们的第一段对话吧}

\subsection{语义化（Semantic）}

学习HTML标签需要注意标签的用途和标签在浏览器中的默认样式。\\

语义化，通俗的讲就是明白每个标签的用途，即在什么情况下使用此标签合理。比如，网页上文章的标题可以用标题标签、各个栏目的名称也可以使用标题标签、文章内容的段落就得放在段落标签中。\\

语义化可以更容易被搜索引擎收录，也更容易让屏幕阅读器读出网页内容。\\

\subsection{p标签}

如果想在网页上显示文章，就需要使用<p>了，把文章的段落放到<p>中。\\

\begin{lstlisting}[style=htmlcssjs]
<p>段落文本</p>
\end{lstlisting}

注意一段文字一个<p>，如在一篇文章中有三段文字，就要分别放到三个<p>中。\\

\mybox{p标签}\\

\begin{lstlisting}[style=htmlcssjs]
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p标签</title>
</head>
<body>
    <p>所有主流浏览器都支持p标签。</p>
    <p>p标签定义段落。</p>
    <p>p元素会自动在其前后创建一些空白。</p>
</body>
</html>
\end{lstlisting}

<p>的默认样式，在段前段后都会有空白，如果不喜欢这个空白，可以用CSS样式来删除或改变它。\\

\subsection{span标签}

<span>是没有语义的，它的作用就是为了设置单独的样式用的。如果现在想把一段中某些字设置成蓝色，这种情况下就可以用到<span>了。\\

\mybox{span标签}\\

\begin{lstlisting}[style=htmlcssjs]
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span标签</title>
    <style type="text/css">
        span {
            color: blue;
        }
    </style>
</head>
<body>
    <p>
        <span>莫里亚蒂</span>有份包裹指明要交给<span>夏洛克</span>
    </p>
</body>
</html>
\end{lstlisting}

\newpage

\section{做个标题党——hx标签}

\subsection{hx标签}

文章的段落用<p>，那么文章的标题可以使用标题标签。标题标签一共有6个，<h1>、<h2>、<h3>、<h4>、<h5>、<h6>分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题，并且依据重要性递减，<h1>是最高的等级。\\

\begin{lstlisting}[style=htmlcssjs]
<h1>标题文本</h1>
<h2>标题文本</h2>
<h3>标题文本</h3>
<h4>标题文本</h4>
<h5>标题文本</h5>
<h6>标题文本</h6>
\end{lstlisting}

网页上的各个栏目标题也可使用标题标签。因为<h1>在网页中比较重要，一般<h1>被用在网站名称上。\\

标题标签的样式都会加粗，<h1>字号最大，<h2>字号相对<h1>要小，以此类推<h6>的字号最小。

\newpage

\section{div标签}

\subsection{div标签}

网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>中，<div>的作用就相当于一个容器。逻辑部分是页面上相互关联的一组元素，如网页中的独立的栏目版块，就是一个典型的逻辑部分。\\

\mybox{div标签}\\

\begin{lstlisting}[style=htmlcssjs]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div标签</title>
</head>
<body>
    <div>
    <h2>热门课程排行榜</h2>
        <ol>
            <li>前端开发面试心法</li>
            <li>零基础学习HTML</li>
            <li>JavaScript全攻略</li>
        </ol>
    </div>

    <div>
        <h2>最新课程排行</h2>
        <ol>
            <li>版本管理工具介绍—Git篇</li>
            <li>Canvas绘图详解</li>
            <li>QQ5.0侧滑菜单</li>
        </ol>
    </div>
</body>
</html>
\end{lstlisting}

\newpage

\section{写代码都不换行吗？——br标签}

\subsection{br标签}

在HTML代码中输入回车、空格都是没有作用的，在HTML中是忽略回车和空格的，输入再多的回车和空格也是现实不出来的。如果需要在HTML文本中输入回车换行，就必须使用<br/>。在需要加回车换行的地方加入<br/>，<br/>的作用相当于Word文档中的回车。\\

<br/>是一个单标签，没有HTML内容的标签就是单标签。单标签只需要写一个开始标签，这样的标签有<br/>、<hr/>和<img/>。\\

\mybox{br标签}\\

\begin{lstlisting}[style=htmlcssjs]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>br标签</title>
</head>
<body>
    <h2>《望庐山瀑布》</h2>
    <p>唐·李白</p>
    <p>
        日照香炉生紫烟，<br/>
        遥看瀑布挂前川。<br/>
        飞流直下三千尺，<br/>
        疑是银河落九天。
    </p>
</body>
</html>
\end{lstlisting}

\newpage

\section{再加点空格呢？——特殊字符}

\subsection{特殊字符}

在HTML代码中输入空格、回车都是没有作用的，输出多个空格只会显示1个空格。如果需要输入空格，必须使用特殊字符\lstinline|&nbsp;|。\\

\mybox{特殊字符}\\

\begin{lstlisting}[style=htmlcssjs]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>空格</title>
</head>
<body>
    <h2>新闻纵览</h2>
    来源：XXX&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;作者：XXX
</body>
</html>
\end{lstlisting}

\newpage

\section{再来个水平分割线——hr标签}

\subsection{hr标签}

在信息展示时，有时会需要加一些用于分隔的横线，这样会使文章看起来整齐些。\\

<hr/>和<br/>一样也是一个单标签，所以只有一个开始标签，没有结束标签。\\

<hr/>在浏览器中的默认样式线条比较粗，颜色为灰色。有些人觉得这种样式不美观，这些在样式可以通过CSS进行修改。\\

\mybox{hr标签}\\

\begin{lstlisting}[style=htmlcssjs]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hr标签</title>
</head>
<body>
    <p>深夜，一道黑影潜入贝克街221B。</p>
    <hr/>
    <p>坐在暗处的夏洛克已等候多时，正等着贝尔纳多自投罗网。</p>
</body>
</html>
\end{lstlisting}

\newpage

\chapter{列表、图片、链接}

\section{有序列表}

\subsection{有序列表（Ordered List）}

如果想在网页中展示有前后顺序的信息列表，如热度排行榜等，这类信息展示可以使用<ol>-<li>来实现有序列表。\\

\begin{lstlisting}[style=htmlcssjs]
<ol>
    <li>信息</li>
    <li>信息</li>
</ol>
\end{lstlisting}

\vspace{0.5cm}

\mybox{有序列表}\\

\begin{lstlisting}[style=htmlcssjs]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序列表</title>
</head>
<body>
    <h3>2020年7月编程语言排行榜</h3>
    <ol>
        <li>C</li>
        <li>Java</li>
        <li>Python</li>
        <li>C++</li>
        <li>C#</li>
    </ol>
</body>
</html>
\end{lstlisting}

\vspace{0.5cm}

\subsection{序号类型}

<ol>-<li>在网页中显示的默认样式一般为每项<li>前都自带一个序号，序号默认从1开始。通过修改<ol>的type属性，也能对序号进行修改。\\

<ol>的type属性有5个值：

\begin{enumerate}
	\item 默认为数字序号：\lstinline|type="1"|
	\item 小写字母序号：\lstinline|type="a"|
	\item 大写字母序号：\lstinline|type="A"|
	\item 小写罗马数字序号：\lstinline|type="i"|
	\item 大写罗马数字序号：\lstinline|type="I"|
\end{enumerate}

<ol>中设置start属性，可以指定开始序号。\\

<ol>中设置\lstinline|reversed="reversed"|属性，可以将列表序号降序排序。

\newpage

\section{无序列表}

\subsection{无序列表（Unordered List）}

网页上也有很多信息是无需按照先后次序排列的，如新闻列表、图片列表等，这类信息展示可以使用<ul>-<li>来实现无序列表。\\

\begin{lstlisting}[style=htmlcssjs]
<ul>
    <li>信息</li>
    <li>信息</li>
</ul>
\end{lstlisting}

<ul>-<li>在网页中显示的默认样式一般为每项<li>前都自带一个圆点。通过修改<ul>的type属性，也能对前面的符号进行修改。\\

<ul>的type属性有2个值：

\begin{enumerate}
	\item 默认为实心小圆点：\lstinline|type="disc"|
	\item 实心正方形：\lstinline|type="square"|
\end{enumerate}

\vspace{0.5cm}

\mybox{无序列表}\\

\begin{lstlisting}[style=htmlcssjs]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序列表</title>
</head>
<body>
    <h3>前端三剑客</h3>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ol>
</body>
</html>
\end{lstlisting}

淘宝网的导航栏就是利用<ul>-<li>的父子结构进行实现的。

\begin{figure}[H]
	\centering
	\includegraphics[scale=0.5]{img/C3/3-2/1.png}
	\caption{淘宝导航栏}
\end{figure}

\mybox{淘宝导航栏}\\

\begin{lstlisting}[style=htmlcssjs]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝</title>
    <style type="text/css">
        ul {
            list-style: none;   /* 无序列表前面不带点 */
        }

        li {
            float: left;
            margin: 20px;
            padding: 5px;
            color: #000;
        }

        li:hover {
            background-color: #f40;     /* 淘宝红 */
            color: #fff;
            border-radius: 15px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <ul>
        <li>天猫</li>
        <li>聚划算</li>
        <li>天猫超市</li>
    </ul>
</body>
</html>
\end{lstlisting}

\newpage

\section{不发一张自拍吗？——img标签}

\subsection{img标签}

在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，<img>用于插入图片。\\

\begin{lstlisting}[style=htmlcssjs]
<img src="图片地址" alt="下载失败时的替换文本" title="提示文本">
\end{lstlisting}

\begin{itemize}
	\item src属性用于标识图像的资源地址，资源地址可以来源于网上的URL，也可以来源于本地。

	\item alt属性指定图像的描述性文本，当图像下载不成功时，可看到该属性指定的文本。

	\item title属性提供当鼠标停留在图片时显示的文本。
\end{itemize}

\vspace{0.5cm}

\mybox{img标签}\\

\begin{lstlisting}[style=htmlcssjs, breaklines=true, breakatwhitespace=false]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img标签</title>
</head>
<body>
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3014023147,616635741&fm=26&gp=0.jpg" alt="皮卡丘.jpg" title="皮卡丘">
</body>
</html>
\end{lstlisting}

\newpage

\section{百度一下，你就知道——a标签}

\subsection{a标签}

<a>可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。\\

\begin{lstlisting}[style=htmlcssjs]
<a href="目标网址" title="鼠标停留显示的文本">链接显示的文本</a>
\end{lstlisting}

<a>中title属性提供的功能是当鼠标停留在链接文字时显示这个属性的文本内容，这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）。\\

\mybox{a标签}\\

\begin{lstlisting}[style=htmlcssjs]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a标签</title>
</head>
<body>
    <a href="http://www.baidu.com" title="点击跳转百度">
        百度一下，你就知道
    </a>
</body>
</html>
\end{lstlisting}

只要为文本加入<a>后，文字的颜色就会自动变为蓝色，被点击过的文本颜色会变为紫色，通过CSS样式可以对文字的颜色进行修改。\\

<a>中还有一个target属性，默认值为\_self,表示在同页面中打开被链接的文档。如果需要在新窗口打开被链接的文档，需要将target属性的值设置为\_blank。\\

\subsection{锚点（Anchor）}

<a>最初的功能是记录锚点（记录位置），通过<a>回到那个位置去。\\

\mybox{锚点}\\

\begin{lstlisting}[style=htmlcssjs, breaklines=true, breakatwhitespace=false]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点</title>
</head>
<body>
    <div id="div1" style="width: 100px; height: 100px; background-color: red;"></div>
    <div id="div2" style="width: 100px; height: 100px; background-color: blue;"></div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a href="#div1">跳转到div1</a>
    <a href="#div2">跳转到div2</a>
</body>
</html>
\end{lstlisting}

<a>作为锚点的应用场景也很多，比如目录跳转。

\begin{figure}[H]
	\centering
	\includegraphics[scale=0.35]{img/C3/3-4/1.png}
	\caption{目录跳转}
\end{figure}

\vspace{0.5cm}

\subsection{协议限定符}

<a>还能作为协议限定符，在点击链接时会强制执行JavaScript代码。\\

\mybox{协议限定符}\\

\begin{lstlisting}[style=htmlcssjs]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问限定符</title>
</head>
<body>
    <a href="JavaScript: while(1) { alert('嘿嘿'); }">点我</a>
</body>
</html>
\end{lstlisting}

\newpage

\chapter{表格、表单}

\section{table标签}

\subsection{table标签}

有时候需要在网页中添加一些表格数据，如企业员工通讯录等。\\

创建表格主要包含5个元素：

\begin{enumerate}
	\item <caption>：定义表格的标题。

	\item <table>：整个表格以<table>开始、</table>结束，<table>在没有添加border属性之前，在浏览器中显示是没有表格线的。

	\item <tr>：表格的一行，有几对<tr>表格就有几行，<tr>里只能放<th>或者<td>。

	\item <th>：表格头部的一个单元格，会加粗居中显示。

	\item <td>：表格的一个单元格，有几对<td>一行中就有几列。
\end{enumerate}

\vspace{0.5cm}

\mybox{企业员工通讯录}\\

\begin{lstlisting}[style=htmlcssjs]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>企业员工通讯录</title>
</head>
<body>
    <h3>企业员工通讯录</h3>
    <hr/>

    <!-- 表格标签 border属性代表给表格加上边框 -->
    <table border="1">
        <!-- 表格标题 -->
        <caption>企业员工通讯录</caption>
        <!-- tr代表一行 -->
        <tr>
            <!-- th代表表格头部的一个单元格 -->
            <th>姓名</th>
            <th>电话</th>
            <th>电子邮件</th>
            <th>职务</th>
        </tr>
        <tr>
            <!-- td代表一个单元格 -->
            <td>张三</td>
            <td>18278900988</td>
            <td>zhangsan@163.com</td>
            <td>研发工程师</td>
        </tr>
        <tr>
            <td>王二</td>
            <td>16589012689</td>
            <td>wanger@163.com</td>
            <td>研发经理</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>17230019065</td>
            <td>lisi@163.com</td>
            <td>研发工程师</td>
        </tr>
    </table>
</body>
</html>
\end{lstlisting}

\newpage

\section{与用户交互——form标签}

\subsection{form标签}

使用HTML表单（form）可以实现网站与用户的交互，表单可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。\\

\begin{lstlisting}[style=htmlcssjs]
<form method="传送方式" action="服务器文件">表单内容</form>
\end{lstlisting}

<form>是成对出现的，以<form>开始、</form>结束。method属性表示数据传送的方式，包括get和post两种方式，get和post的区别属于后端程序员需要考虑的问题，完全取决于后端人员要求什么方式进行传输。action属性表示浏览者输入的数据被传送到的地方，比如一个PHP页面。\\

所有的表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在<form>之间，否则用户输入的信息无法提交到服务器上。

\newpage

\section{先来填用户名和密码——文本、密码输入框}

\subsection{文本、密码输入框}

当用户需要在表单中输入字母、数字等内容时，就需要使用到文本输入框，文本框也可转化为密码输入框。\\

\begin{lstlisting}[style=htmlcssjs]
<form>
    <input type="text/password" name="名称" value="文本" />
</form>
<form>
    <input type="text/password" name="名称" value="文本" />
</form>
\end{lstlisting}

\begin{itemize}
	\item \lstinline|type="text"|：输入框为文本输入框
	\item \lstinline|type="password"|：输入框为密码输入框
	\item name：为文本框命名，以备后台程序使用
	\item value：为文本输入框设置默认值，一般起提示作用
\end{itemize}

\vspace{0.5cm}

\subsection{给点提示呗——placeholder属性}

有时候需要提示用户输入框需要输入的内容，这时候就需要使用<input>中的占位符placeholder属性。\\

placeholder属性的值可以根据情况合理填写，当输入框输入内容时，占位符内容消失，当输入框无内容时，占位符内容显示。注意，占位符内容不是输入框真正的内容。\\

\subsection{重置按钮}

当用户需要重置表单信息到初始状态时，比如输入“账号”或“密码”有误，就可以使用重置按钮使输入框恢复到初始状态。通过设置<input>中type属性为reset即可实现重置按钮。\\

\subsection{提交按钮}

当用户需要提交表单信息到服务器时，需要用到提交按钮。通过设置<input>中type属性为submit即可实现提交按钮。表单信息会被发送给后端，在数据库对比账户和密码信息。\\

\mybox{登录功能}\\

\begin{lstlisting}[style=htmlcssjs]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
    <form action="get/post">
        账号：<input type="text" placeholder="请输入账号" name="username">
        <br/>
        密码：<input type="password" placeholder="请输入密码" name="password">
        <br/>
        <input type="submit">
        <input type="reset">
    </form>
</body>
</html>
\end{lstlisting}

\newpage

\section{数字、网址、邮箱输入框}

\subsection{数字、网址、邮箱输入框}

\begin{itemize}
	\item 数字输入框：<input>的type属性设置为number，则表示该输入框的类型为数字。数字框只能输入数字，输入其它字符无效。数字框最右侧会有一个加减符号，可以调整输入数字的大小，不同浏览器表现不一致。

	\item 网址输入框：<input>的type属性设置为url，表示输入类型为网址。网址输入框必须以http://或https://开头，且后面必须有内容，否则提交时会报错误提示。

	\item 邮箱输入框：<input>的type属性设置为email，则表示该输入框的类型为邮箱。邮箱输入框的值必须包含`@`，并且之后必须有内容，否则会报错误提示。
\end{itemize}

\vspace{0.5cm}

\mybox{个人信息}\\

\begin{lstlisting}[style=htmlcssjs]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
</head>
<body>
    <form action="get/post">
        姓名：<input type="text" name="name"><br/>
        年龄：<input type="number" name="age"><br/>
        主页：<input type="url" name="webpage"><br/>
        邮箱：<input type="email" name="email"><br/>
        <input type="submit"><input type="reset">
    </form>
</body>
</html>
\end{lstlisting}

\newpage

\section{文本域}

\subsection{文本域}

当用户需要在表单中输入大段文字时，就需要用到文本输入域。<textarea>中也可以设置placeholder属性来显示提示信息。\\

\begin{lstlisting}[style=htmlcssjs]
<textarea rows="行数" cols="列数">文本</textarea>
\end{lstlisting}

\begin{itemize}
	\item rows：多行输入域的行数，可以用CSS样式的height代替
	\item cols：多行输入域的列数，可以用CSS样式的width代替
\end{itemize}

\vspace{0.5cm}

\mybox{文本域}\\

\begin{lstlisting}[style=htmlcssjs]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本域</title>
</head>
<body>
    <form action="get/post">
        <textarea cols="30" rows="10" placeholder="请输入..."></textarea>
    </form>
</body>
</html>
\end{lstlisting}

\newpage

\section{label标签}

\subsection{label标签}

<label>不会向用户呈现任何特殊特效，它的作用是为鼠标用户改进了可用性。如果在<label>内点击文本，就会触发此控件。也就是说，当用户单击选中该<label>时，浏览器就会自动将焦点转到和标签相关的表单控件上。\\

\begin{lstlisting}[style=htmlcssjs]
<label for="控件id名称">
\end{lstlisting}

注意，<label>的for属性的值必须要与相关空间的id属性值相同。\\

\mybox{label标签}\\

\begin{lstlisting}[style=htmlcssjs]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>label标签</title>
</head>
<body>
    <form action="get/post">
        <label for="username">用户名：</label>
        <input type="text" id="username">
    </form>
</body>
</html>
\end{lstlisting}

\newpage

\section{单选框、复选框}

\subsection{单选框、复选框}

在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意。HTML中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。\\

\begin{lstlisting}[style=htmlcssjs]
<input type="radio/checkbox" name="名称" value="值" checked="checked">
\end{lstlisting}

\begin{itemize}
	\item \lstinline|type="radio"|：单选框
	\item \lstinline|type="checkbox"|：复选框
	\item name：为控件命名，具有相同名称的选择框属于同一组
	\item checked：设置默认选中的值
\end{itemize}

在网页开发中，往往需要优化用户体验。一个好的产品有3个特点：解决刚需的问题、用户体验、用户黏性（产品定位）。用户体验就是养成用户的懒习惯，减少用户操作，能不让用户操作就不让用户操作，节省用户时间，用户不动手就会觉得方便。例如一个选择性别的单选框，概率上看，假设有100个人，50男50女，使用默认选项，可以节省一半人的操作。\\

\mybox{单选框/复选框}\\

\begin{lstlisting}[style=htmlcssjs]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单选框/复选框</title>
</head>
<body>
    <form action="get/post">
        1. 您是否喜欢运动？
        <input type="radio" name="sport" checked="checked">是
        <input type="radio" name="sport">否
        2. 您喜欢的运动是？
        <input type="checkbox" name="sport_item">跑步
        <input type="checkbox" name="sport_item">篮球
        <input type="checkbox" name="sport_item">羽毛球
    </form>
</body>
</html>
\end{lstlisting}

\newpage

\section{下拉列表}

\subsection{下拉列表}

下拉列表在网页中也常会用到，它可以有效的节省网页空间。下拉列表既可以单选也可以多选。\\

\begin{lstlisting}[style=htmlcssjs]
<select>
    <option value="值">选项</option>
    <option value="值">选项</option>
</select>
\end{lstlisting}

\begin{itemize}
	\item value：向服务器提交的值，而双标签中间的内容才是显示的值
	\item selected：设置\lstinline|selected="selected"|表示该选项被默认选中
\end{itemize}

\vspace{0.5cm}

\mybox{下拉列表}\\

\begin{lstlisting}[style=htmlcssjs]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉列表</title>
</head>
<body>
    <form action="get/post">
        <select>
            <option value="male" selected="selected">男</option>
            <option value="female">女</option>
        </select>
    </form>
</body>
</html>
\end{lstlisting}

\newpage